<template>
  <!-- 监测公共页面 -->
  <div class="modelManage">
    <el-row>
      <el-col :span="24">
        <el-form :inline="true"
                 :model="form"
                 style="float: right">
          <el-form-item>
            <LocationSelect :locaData.sync="form.address"
                            :catchParams="catchParams"></LocationSelect>
          </el-form-item>
          <el-form-item>
            <el-input v-model="form.proName"
                      placeholder="项目名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary"
                       @click="onSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="6"
              v-for="(item, index) in proData"
              :key="index">
        <div class="box"
             @click="jumpPage(item)">
          <div class="img">
            <img :src="item.img_url.length>60?item.img_url:'/static/img/defaultImg.png'"
                 style="width:100%;height:100%" />
          </div>
          <div class="info">{{item.project_name}}</div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24"
              style="padding-top:40px ;text-align: center">
        <el-pagination @current-change="handleCurrentChange"
                       :current-page="page"
                       layout="total, prev, pager, next, jumper"
                       :total="pageTotal"
                       :page-sizes="[8]"></el-pagination>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { monitorPublicApi } from "@/services/ProjectCenter";
import { standardCodeApi } from "@/services/StandardCode";
import LocationSelect from "@/components/LocationSelect/LocationSelect";
export default {
  components: {
    LocationSelect
  },
  data () {
    return {
      form: {
        address: {},
        proName: ""
      },
      proCityArearObj: {},
      proData: [],
      pageTotal: 0,
      page: 1,
      per_page: 8
    };
  },
  methods: {
    //省市区组件中的值
    catchParams (obj) {
      this.proCityArearObj = obj;
      this.onSearch();//刷新
      console.log('子组件传来的值catchParams=', obj)
    },
    //查询
    onSearch () {
      this.page = 1;
      this.getData();
    },
    //获取数据
    getData () {
      monitorPublicApi
        .getProjectList({
          params: {
            province_no: this.proCityArearObj.province_no,
            city_no: this.proCityArearObj.city_no,
            area_no: this.proCityArearObj.area_no,
            project_name: this.form.proName,
            page: this.page,
            per_page: 8
          }
        })
        .then(res => {
          this.proData = res.data.list;
          this.pageTotal = res.data.total_count;
        });
    },
    handleCurrentChange (val) {
      this.page = val;
      this.getData();
    },
    //跳转第三方页面
    jumpPage (data) {
      var url = this.$route.query.params;
      this.$router.push({ path: url, query: { projects: data.project_id } });
    }
  },
  created () {
    this.getData();
  }
};
</script>
<style lang="scss" scoped>
.modelManage {
  padding: 10px;

  .box {
    width: 100%;
    height: 240px;
    cursor: pointer;

    .img {
      width: 100%;
      height: 175px;
    }

    .info {
      width: 150px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 14px 5px;
    }
  }
}
</style>